<template>
  <el-container direction="vertical" class="order_detail_page">
    <navigation title="订单详情"></navigation>
    <el-main class="detail_main">
      <div class="order_state margin_bottom horizontal-view">
        <span class="table_name">{{detail_data.tableName}}</span>
        <span class="state sate_settle" v-if="detail_data.orderStatus == 'SETTLEMENT'">待结算</span>
      </div>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="card_head horizontal-view">
          <span class="font_weight">商品清单</span>
          <el-button type="primary" round>加菜</el-button>
        </div>
        <div class="product_item horizontal-view" v-for="(item,index) in detail_data.items" :key="index">
          <img :src="IMAGE_API + item.productHeadImage" class="product_img" alt="">
          <div class="item_right">
            <p class="name">{{item.productName}}</p>
            <p class="num">{{item.productNumber}}{{item.productUnit}}</p>
            <p class="price">￥{{item.sellingPrice}}</p>
          </div>
        </div>
        <div class="card_foot">
          <div class="person_num border_top horizontal-view">
            <span>餐位费 {{detail_data.tableFee}}元/人</span>
            <span class="num_price">{{detail_data.personNumber}}人 ￥{{detail_data.personNumber * detail_data.tableFee}}</span>
          </div>
          <div class="total border_top horizontal-view">
            <i class="num">共 {{detail_data.productTotaleCount}} 份</i>
            <span>合计:￥{{detail_data.realPayPrice}}</span>
          </div>
        </div>
      </el-card>

      <el-card class="box-card margin_top" shadow="never">
        <div slot="header" class="card_head horizontal-view">
          <span class="font_weight">订单信息</span>
        </div>
        <div class="card_body">
          <el-row class="margin_bottom">
            <el-col :span="12">
              <div class="order_info_item horizontal-view">
                <label>操 作 员:</label>
                <span>{{detail_data.buyUserName}}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="order_info_item horizontal-view">
                <label>下单时间:</label>
                <span>{{detail_data.createTime |dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="margin_bottom">
            <el-col :span="12">
              <div class="order_info_item horizontal-view">
                <label>订单编号:</label>
                <span>{{detail_data.orderId}}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="order_info_item horizontal-view">
                <label>客源渠道:</label>
                <span></span>
              </div>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="12">
              <div class="order_info_item horizontal-view">
                <label>客源类型:</label>
                <span></span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="order_info_item horizontal-view">
                <label>市场活动:</label>
                <span></span>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="remark_area margin_top horizontal-view">
          <i>备 注:</i>
          <p>{{detail_data.remark}}</p>
        </div>

      </el-card>

      <div class="foot_btns margin_top horizontal-view">
        <el-button plain round>取消订单</el-button>
        <el-button plain round>打印订单</el-button>
        <el-button type="success" round
                   v-if="detail_data.orderStatus == 'SETTLEMENT'"
                   @click="onSettlement()"
        >结算</el-button>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import navigation from '@/components/nav/index.vue'
import config from '@/common/config'
export default {
  name: "index",
  components: {
    'navigation': navigation
  },
  data(){
    return{
      orderId:"",
      detail_data:{},
      IMAGE_API:config.IMAGE_API,
    }
  },
  activated() {
    this.orderId = this.$route.query.orderId;
    this.getOrderDetail();
  },
  methods:{
    /**
     * 获取订单详情
     */
    getOrderDetail(){
      this.$restaurantApi.getOrderDetail({orderId:this.orderId}).then(res=>{
        console.log(res);
        if(res.dataCode == 200){
          this.detail_data = res.dataObj;
        }
      })
    },
    /**
     * 结算
     */
    onSettlement(){
      this.$router.replace({
        path: "/settle-accounts", query: {
          orderId:this.orderId,
        },
      });
    }

  }
}
</script>

<style scoped lang="scss">
  .order_detail_page{
    background: #ebebeb;
    height: 100%;
  }
  .order_state{
    height: 40px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 0 15px;
    .table_name{
      font-size: 18px;
    }
    .sate_settle{
      color: #3d8901;
    }
  }
  .detail_main{
    padding: 0;
    .card_head{
      justify-content: space-between;
      align-items: center;
    }
    .product_item{
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .item_right{
        text-align: right;
      }
      .product_img{
        width: 120px;
        height: 120px;
        border-radius: 4px;
      }
      .name{
        font-weight: bold;
      }
      .num{
        color: #3d8901;
      }
      .price{
        margin-top: 10px;
        font-weight: bold;
      }
    }
    .product_item:last-child{
      margin-bottom: 0;
    }

    .card_foot{
      .person_num{
        color: #999;
        font-size: 14px;
        padding: 10px 0;
        justify-content: space-between;
        .num_price{
          font-weight: bold;
          color: #333;
        }
      }
      .total{
        padding-top: 20px;
        justify-content: flex-end;
        font-weight: bold;
        .num{
          margin-right: 15px;
        }
      }

    }


    .order_info_item{
      label{
        width: 100px;
        color: #999;
      }
    }
    .remark_area{
      i{
        width: 100px;
        margin-right: 50px;
        color: #999;
      }
    }

    .foot_btns{
      margin-top: 50px;
      margin-bottom: 50px;
      justify-content: center;
    }
  }

</style>